<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style>
        .card-box{
            display: flex;
            margin: 10px;
            justify-content: center;
            align-items: center;
        }
        img{
            width: 141px;
            height: 80px;
        }
        .title{
            font-size: 14px;
            font-weight: 500;
            height: 36px;
            line-height: 18px;
            margin-bottom: 6px;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .card-box .info {
            margin-left: 10px;
        }
        .card-box .info .count {
            display: inline-block;
            height: 16px;
            width: 100%;
            color:#999;
            font-size: 12px;
        }
    </style>
    	<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
        <script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <style type="text/css">
            .like{
                position: relative;
                margin-left: 10px;
            }
            .like-ani{
                -webkit-animation-name:likeani;
                        animation-name:likeani;
                -webkit-animation-duration: .8s;
                        animation-duration: .8s;
                -webkit-animation-timing-function:ease-in-out;
                        animation-timing-function:ease-in-out;
            }
            .unlike-ani{
                -webkit-animation-name:unlikeani;
                        animation-name:unlikeani;
                -webkit-animation-duration: .8s;
                        animation-duration: .8s;
                -webkit-animation-timing-function:ease-in-out;
                        animation-timing-function:ease-in-out;
            }
            .miniicon{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%) scale(1);
                display: block;
                color: red;
                z-index: -555;
                opacity: 0;
            }
            .icon-ani1{
                -webkit-animation-name:iconani1;
                        animation-name:iconani1;
                -webkit-animation-duration: 1s;
                        animation-duration: 1s;
                -webkit-animation-timing-function:ease-in-out;
                        animation-timing-function:ease-in-out;
            }
            .icon-ani2{
                -webkit-animation-name:iconani2;
                        animation-name:iconani2;
                -webkit-animation-duration: 1s;
                        animation-duration: 1s;
                -webkit-animation-timing-function:ease-in-out;
                        animation-timing-function:ease-in-out;
            }
            .icon-ani3{
                -webkit-animation-name:iconani3;
                        animation-name:iconani3;
                -webkit-animation-duration: 1s;
                        animation-duration: 1s;
                -webkit-animation-timing-function:ease-in-out;
                        animation-timing-function:ease-in-out;
            }
            @-webkit-keyframes likeani{
                0% {-webkit-transform: scale(1);transform: scale(1);color: rgb(255,68,68);}
                60%{-webkit-transform: scale(1.2);transform: scale(1.2);color: rgb(255,20,20);}
                90%{-webkit-transform: scale(0.9);transform: scale(0.9);}
                100%{-webkit-transform: scale(1);transform: scale(1);color: rgb(255,0,0);}
                
            }
            @keyframes likeani{
                0% {-webkit-transform: scale(1);transform: scale(1);color: rgb(255,68,68);}
                60%{-webkit-transform: scale(1.2);transform: scale(1.2);color: rgb(255,20,20);}
                90%{-webkit-transform: scale(0.9);transform: scale(0.9);}
                100%{-webkit-transform: scale(1);transform: scale(1);color: rgb(255,0,0);}
                
            }
            @-webkit-keyframes unlikeani{
                0% {-webkit-transform: scale(0.8);transform: scale(0.8);}
                60%{-webkit-transform: scale(1.1);transform: scale(1.1);}
                100%{-webkit-transform: scale(1);transform: scale(1);}
                
            }
            @keyframes unlikeani{
                0% {-webkit-transform: scale(0.8);transform: scale(1);}
                40%{-webkit-transform: scale(1.1);transform: scale(1.1);}
                100%{-webkit-transform: scale(1);transform: scale(1);}
                
            }
            @-webkit-keyframes iconani1{
                0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
                50%{-webkit-transform:translate(-50px,-60px) scale(0.9);transform:translate(-50px,-60px) scale(0.9);opacity: 0.6;}
                100%{-webkit-transform:translate(-50px,-100px) scale(0);transform:translate(-50px,-100px) scale(0);opacity: 1;}
            }
            @keyframes iconani1{
                0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
                50%{-webkit-transform:translate(-50px,-60px) scale(0.9);transform:translate(-50px,-60px) scale(0.9);opacity: 0.6;}
                100%{-webkit-transform:translate(-50px,-100px) scale(0);transform:translate(-50px,-100px) scale(0);opacity: 1;}
            }
            @-webkit-keyframes iconani2{
                0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
                50%{-webkit-transform:translate(0px,-60px) scale(0.9);transform:translate(0px,-60px) scale(0.9);opacity: 0.5;}
                100%{-webkit-transform:translate(0px,-100px) scale(0);transform:translate(0px,-100px) scale(0);opacity: 1;}
            }
            @keyframes iconani2{
                0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
                50%{-webkit-transform:translate(0px,-60px) scale(0.9);transform:translate(0px,-60px) scale(0.9);opacity: 0.5;}
                100%{-webkit-transform:translate(0px,-100px) scale(0);transform:translate(0px,-100px) scale(0);opacity: 1;}
            }
            @-webkit-keyframes iconani3{
                0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
                50%{-webkit-transform:translate(40px,-60px) scale(0.9);transform:translate(40px,-60px) scale(0.9);opacity: 0.5;}
                100%{-webkit-transform:translate(40px,-100px) scale(0);transform:translate(40px,-100px) scale(0);opacity: 1;}
            }
            @keyframes iconani3{
                0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
                50%{-webkit-transform:translate(40px,-60px) scale(0.9);transform:translate(40px,-60px) scale(0.9);opacity: 0.5;}
                100%{-webkit-transform:translate(40px,-100px) scale(0);transform:translate(40px,-100px) scale(0);opacity: 1;}
            }
            @-webkit-keyframes starani{
    		0% {-webkit-transform: scale(1);transform: scale(1);color: rgb(255,255,68);}
    		60%{-webkit-transform: scale(1.2);transform: scale(1.2);color: rgb(255,255,20);}
    		90%{-webkit-transform: scale(0.9);transform: scale(0.9);}
    		100%{-webkit-transform: scale(1);transform: scale(1);color: rgb(255,255,0);}
    		
    	}
    	@keyframes starani{
    		0% {-webkit-transform: scale(1);transform: scale(1);color: rgb(255,255,68);}
    		60%{-webkit-transform: scale(1.2);transform: scale(1.2);color: rgb(255,255,20);}
    		90%{-webkit-transform: scale(0.9);transform: scale(0.9);}
    		100%{-webkit-transform: scale(1);transform: scale(1);color: rgb(255,255,0);}
    		
    	}
    	@-webkit-keyframes unstarani{
    		0% {-webkit-transform: scale(0.8);transform: scale(0.8);}
    		60%{-webkit-transform: scale(1.1);transform: scale(1.1);}
    		100%{-webkit-transform: scale(1);transform: scale(1);}
    		
    	}
    	@keyframes unstarani{
    		0% {-webkit-transform: scale(0.8);transform: scale(1);}
    		40%{-webkit-transform: scale(1.1);transform: scale(1.1);}
    		100%{-webkit-transform: scale(1);transform: scale(1);}
    		
    	}
        .star-ani{
    		-webkit-animation-name:starani;
    		        animation-name:starani;
    		-webkit-animation-duration: .8s;
    		        animation-duration: .8s;
    		-webkit-animation-timing-function:ease-in-out;
    		        animation-timing-function:ease-in-out;
    	}
    	.unstar-ani{
    		-webkit-animation-name:unstarani;
    		        animation-name:unstarani;
    		-webkit-animation-duration: .8s;
    		        animation-duration: .8s;
    		-webkit-animation-timing-function:ease-in-out;
    		        animation-timing-function:ease-in-out;
    	}
    	.miniicon-star{
    		position: absolute;
    		left: 50%;
    		top: 50%;
    		transform: translate(-50%,-50%) scale(1);
    		display: block;
    		color: yellow;
    		z-index: -555;
    		opacity: 0;
    		
    	}
        </style>
</head>

<body>
        <div id="demo_x" class="" ></div>
</body>

<!-- 必要 -->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/render_somthing.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script>
    {
        var render_somthing_demo_x;
        render_somthing_demo_x = new render_somthing();
        render_somthing_demo_x.init({
            // div的id
            id: "#demo_x",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
<ul style="padding-left:0px;"></ul>
    `
            },
            // 渲染内容的配置
            content: {
                default: `
                <div class="card-box">
                    <div class="pic-box">
                        <div class="pic">
                        <img src="#{img}"/>
                        </div>
                    </div>
                    <div class="info">
                        <a class="title">#{title}</a>
                        <div class="count up">
                            <a >#{author}</a>
                        </div>
                        <div class="count">#{play} 播放&nbsp;·&nbsp;#{count} 弹幕</div>
                    </div>
                    <div data-key="love_click" class="like" >
                        <i id="@{ROW_INDEX}" class="likeicon layui-icon layui-icon-heart" data-anilike='like-ani' data-aniunlike='unlike-ani' data-iconfill='layui-icon-heart-fill' style="font-size: 30px;color: red;cursor: pointer;display: block;"></i> 
                        <i  class="miniicon@{ROW_INDEX} miniicon layui-icon layui-icon-heart-fill" data-ani='icon-ani1'></i> 
                        <i  class="miniicon@{ROW_INDEX} miniicon layui-icon layui-icon-heart-fill" data-ani='icon-ani2'></i> 
                        <i  class="miniicon@{ROW_INDEX} miniicon layui-icon layui-icon-heart-fill" data-ani='icon-ani3'></i> 
                    </div>
                    <div data-key="collection_click" class="like" >
                    <i id="star@{ROW_INDEX}" class="likeicon layui-icon layui-icon-star" data-anistar='star-ani' data-aniunstar='unstar-ani' data-iconfill='layui-icon-star-fill' style="font-size: 30px;color: yellow;cursor: pointer;display: block;"></i> 
                    <i class="miniicon-star miniicon-star@{ROW_INDEX} layui-icon layui-icon-star-fill" data-ani='icon-ani1'></i> 
                    <i class="miniicon-star miniicon-star@{ROW_INDEX} layui-icon layui-icon-star-fill" data-ani='icon-ani2'></i> 
                    <i class="miniicon-star miniicon-star@{ROW_INDEX} layui-icon layui-icon-star-fill" data-ani='icon-ani3'></i> 
                    </div>
                </div>
`,
            },
            callback: {
                //点击爱心
                click: function (res) {
                    if (res.key == "love_click") {
                        console.log(res);
                        var miniicon=$('.miniicon'+res.index);
                        var likethis=$("#"+res.index);
                        iconfill=likethis.data('iconfill'),
                        anilike=likethis.data('anilike'),
                        aniunlike=likethis.data('aniunlike');
                        likethis.removeClass('layui-icon-heart');
                        
                            likethis.removeClass(aniunlike).addClass(iconfill).addClass(anilike);
                            miniicon.each(function(){
                                $(this).addClass($(this).data('ani'));
                            });
                            setTimeout(function(){
                                miniicon.each(function(){
                                $(this).removeClass($(this).data('ani'));
                            });
                            }, 500 )
                    }
                    if (res.key == "collection_click") {
                        console.log(res);
                        var miniiconstar=$('.miniicon-star'+res.index);
                        var likethis=$("#star"+res.index),
                        iconfill=likethis.data('iconfill'),
                        anistar=likethis.data('anistar'),
                        aniunstar=likethis.data('aniunstar');
                        likethis.removeClass('layui-icon-star');
                        if (likethis.hasClass(iconfill)) {
                            likethis.removeClass(iconfill)
                            .addClass('layui-icon-star')
                            .removeClass(anistar)
                            .addClass(aniunstar);
                            miniiconstar.each(function(){
                                $(this).removeClass($(this).data('ani'));
                            });	 
                        }else{
                            likethis.removeClass(aniunstar).addClass(iconfill).addClass(anistar);
                            miniiconstar.each(function(){
                                $(this).addClass($(this).data('ani'));
                            });
                        }
                    }
                }
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
               # {title}     - 变量，表示数据数组中对象的key
            */
            condition: [
            ],
        })
        render_somthing_demo_x.render([{
                        img: "https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=cd86988c75d9f2d33f1122ef99ed8a53/3bf33a87e950352a702e82654443fbf2b2118b14.jpg",
                        title: "【懂点儿啥】美国欲绞杀华为 自己的黑料却全被扒光",
                        author:"观察者网",
                        play:"158.1万",
                        count:"2.9万",
                        id:"1"
                        
                    }, {
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1514842991,532324681&fm=26&gp=0.jpg",
                        title: "【手绘OP】JOJO的奇妙冒险黄金之风OP2！背叛者的镇魂曲（600张爆肝手绘/轻微剧透）",
                        author:"观察者网",
                        play:"158.1万",
                        count:"2.9万",
                        id:"2"
                    }, {
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1514842991,532324681&fm=26&gp=0.jpg",
                        title: "【手绘OP】JOJO的奇妙冒险黄金之风OP2！背叛者的镇魂曲（600张爆肝手绘/轻微剧透）",
                        author:"观察者网",
                        play:"158.1万",
                        count:"2.9万",
                        id:"3"
                        
                    }, {
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1514842991,532324681&fm=26&gp=0.jpg",
                        title: "【手绘OP】JOJO的奇妙冒险黄金之风OP2！背叛者的镇魂曲（600张爆肝手绘/轻微剧透）",
                        author:"观察者网",
                        play:"158.1万",
                        count:"2.9万",
                        id:"4"
                    }, {
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1514842991,532324681&fm=26&gp=0.jpg",
                        title: "【手绘OP】JOJO的奇妙冒险黄金之风OP2！背叛者的镇魂曲（600张爆肝手绘/轻微剧透）",
                        author:"观察者网",
                        play:"158.1万",
                        count:"2.9万",
                        id:"5"
                    }, {
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1514842991,532324681&fm=26&gp=0.jpg",
                        title: "【手绘OP】JOJO的奇妙冒险黄金之风OP2！背叛者的镇魂曲（600张爆肝手绘/轻微剧透）",
                        author:"观察者网",
                        play:"158.1万",
                        count:"2.9万"
                        ,
                        id:"6"
                    }, ]);
    }
</script>

</html>